// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) 2015-2020 Andrey Antukh <niwi@niwi.nz>
// Copyright (c) 2015-2020 Juan de la Cruz <delacruzgarciajuan@gmail.com>

// Colors
$color-white: #ffffff;
$color-black: #000000;
$color-canvas: #E8E9EA;
$color-dashboard: #F6F6F6;

// Main color
$color-primary: #31EFB8;

// Secondary colors
$color-success: #58C35C;
$color-complete : #a599c6;
$color-warning: #FC8802;
$color-danger: #E65244;
$color-info: #59b9e2;
$color-ocean: #4285f4;
$color-component: #76B0B8;
$color-component-highlight: #00E0FF;

// Gray scale
$color-gray-10: #E3E3E3;
$color-gray-20: #b1b2b5;
$color-gray-30: #7B7D85;
$color-gray-40: #64666A;
$color-gray-50: #303236; 
$color-gray-60: #1F1F1F;

// Mixing Color variable for creating both light and dark colors
$mix-percentage-dark: 81%;
$mix-percentage-darker: 60%;
$mix-percentage-light: 80%;
$mix-percentage-lighter: 20%;
$mix-percentage-lightest: 10%;

// Lighter colors
$color-success-light: mix($color-success, $color-white, $mix-percentage-light);
$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter);

$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light);
$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter);

$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light);
$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter);

$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light);
$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter);

$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light);
$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter);

$color-info-light: mix($color-info, $color-white, $mix-percentage-light);
$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter);

// Darker colors
$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark);
$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker);

$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark);
$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker);

$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark);
$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker);

$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark);
$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker);

$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark);
$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker);

$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark);
$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker);

// bg transparent
$color-dark-bg: rgba(0,0,0,.4);
$color-light-bg: rgba(255,255,255,.6);
